import { useState } from 'react';
import type {LoginResponseType} from './types';
import { useNavigate } from 'react-router-dom';
import useRequest from '../../hooks/useRequest';
import {message} from '../../utils/message';
// import Modal, {ModalInterfaceType} from '../../components/Modal'

/**
 * 嵌套路由：可以解决很多重复代码的问题，去掉冗余代码
 * 重点：
 * 1、使用TS定义接口返回内容
 */

const Login = ()=>{
    // const modalRef = useRef<ModalInterfaceType>(null)
    const [phoneNumber, setPhoneNumber] = useState('');
    const [password, setPassword] = useState('');
    const navigate = useNavigate();
    /**
     * 重点：
     * 1.1、使用泛型传递给useRequest方法
     * 1.2、见utils ->useRequest文件第六行
     */
    // 1.5 接收data, 类型也一定为LoginResponseType | null
    // const{ data, error, request, cancel } = useRequest<LoginResponseType>('/a.json', 'GET', {});
    const { request } = useRequest<LoginResponseType>({manual: true}); // {manual: true} 手动触发请求
    /**
     * 鼠标hover 上面的data 会出现const data: null，这是不对的
     * 因为，如果它是null,那么17行代码，这个判断永远 无法执行，
     * if (null) {console.log(111)}  永远无法打印111
     * 我们其实可以在接口返回数据的时候告诉，这个类型返回的是什么样的
     */
    // 点击登录按钮时的操作
    function handleSubmitBtnClick(){
        if (!phoneNumber) {
            message('请输入手机号码')
            // console.log(111,modalRef)
            // modalRef.current?.showMessage('请输入手机号码')
            return
        }
        if (!password) {
            message('密码不能为空')
            // modalRef.current?.showMessage('密码不能为空')
            return
        }
        request({
            url: '/login.json',
            method: 'POST',
            data: { // post请求传data作为参数，get请求params作为参数
              phone: phoneNumber,
              password: password
            }
        }).then((data)=>{
            const {data: {token}} = data;
            if(token){
                // data && console.log(data)
                localStorage.setItem('token', token) 
                /**
                 * 存到了本地存储中，这样登陆之后发请求验证登陆
                 * 状态的时候，后端都需要把这个请求token持续的带给后端，
                 * 这需要做一个处理，就是说，如果已经确认用户处于登陆状态了，
                 * 再跳转到登陆页面的时候就不应该展示登陆了，因为用户已经登陆了
                 * 具体步骤见Account/index.tsx 组件的useEffect方法中处理
                 */
                navigate('/home') // 登陆成功导航到home页面
            }
        }).catch((e: any)=>{
            message(e?.message || '未知异常')
            // modalRef.current?.showMessage(e?.message || '未知异常')
        });
        // cancel(); // 取消请求
    }


    return (
        <>
            <div className="form">
                <div className='form-item'>
                    <div className="form-item-title">手机号</div>
                    <input
                        value={phoneNumber}
                        className='form-item-content'
                        type="text" 
                        onChange={(e)=>{
                            setPhoneNumber(e.target.value)
                        }}
                        placeholder='请输入手机号' />
                </div>
                <div className='form-item'> 
                    <div className="form-item-title">密码</div>
                    <input
                        value={password}
                        type="password"
                        className='form-item-content'
                        onChange={(e)=>{
                            setPassword(e.target.value)
                        }}
                        placeholder='请输入密码' />
                </div>
            </div>
            <div className="submit" onClick={handleSubmitBtnClick}>登陆</div>
            <p className="notice">*登陆即表示您赞同使用条款及隐私政策</p>
             {/* <Modal ref={modalRef} /> */}
        </>
    )
}
export default Login